﻿@{
    ViewBag.Title = "Index";
}

<link href="/Scripts/EasyUI/Insdep/easyui.css" rel="stylesheet" />
<link href="/Scripts/EasyUI/Insdep/icon.css" rel="stylesheet" />
<link href="/Scripts/EasyUI/Insdep/master.css" rel="stylesheet" />

<script src="/Scripts/EasyUI/jquery.easyui.min.js"></script>
<script src="/Scripts/EasyUI/easyui-lang-zh_CN.js"></script>
<script src="/Scripts/EasyUI/Insdep/jquery.insdep-extend.min.js"></script>

<style type="text/css">
    .panel.easyui-fluid {
        float: left;
    }
</style>

<div style="margin-top:20px">

    <a id="ee" title="This is the tooltip message." class="easyui-tooltip">测试</a>
    <a id="dd" href="javascript:void(0)">Click here</a>

    <div class="easyui-layout" id="layouts" style="width:100%;height:900px;margin-top:20px">
        <div data-options="region:'north'" title="North" style="height:100px">
            <div style="margin-top:10px;margin-left:69%;width:30%">
                <input id="ss" class="easyui-searchbox" style="width:100%" data-options="searcher:qq,prompt:'Please Input Value',menu:'#mm'">
                <div id="mm" style="width:120px;">
                    <div data-options="name:'a1',iconCls:'icon-ok'">哈哈</div>
                    <div data-options="name:'a2',iconCls:'icon-save'">嘿嘿</div>
                </div>
            </div>
        </div>

        <div data-options="region:'south',split:true" title="South" style="height:100px;"></div>
        <div data-options="region:'east',split:true,href:'LayUIDemo'" title="East" style="width:200px;"></div>
        <div data-options="region:'west',split:true,tools:'#tt'" title="West" style="width:200px;"></div>

        <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">

            <div id="p" class="easyui-panel" title="My Panel" style="width:50%;height:150px;padding:10px;background:#fafafa;float:left" data-options="iconCls:'icon-save',closable:true,collapsible:true,minimizable:true,maximizable:true,tools:'#tt'">
                <p>panel content.</p>
                <p>panel content.</p>
            </div>

            <div id="p1" class="easyui-panel" title="表单" style="width:50%;height:150px;padding:10px;background:#fafafa;float:left" data-options="iconCls:'icon-save',closable:true,collapsible:true,minimizable:true,maximizable:true,tools:'#tt'">
                <select id="combobox" class="easyui-combobox" name="dept" style="width:100px;">
                    <option value="aa">aitem1</option>
                    <option value="bb">bitem2</option>
                    <option value="cc">bitem3</option>
                    <option value="dd">ditem4</option>
                    <option value="ee">eitem5</option>
                </select>

                <input class="easyui-textbox" id="textbox1" data-options="type:'text',disabled:false,buttonIcon:'icon-search',value:'123'">
                <input class="easyui-textbox" data-options="iconCls:'icon-search',type:'text',readonly:true">

                @*<div id="windows" class="easyui-window" title="My Window" style="width:600px;height:400px"
                         data-options="iconCls:'icon-save',modal:true">
                        <div class="easyui-layout" data-options="fit:true">
                            <div data-options="region:'north',split:true" style="height:100px"></div>
                            <div data-options="region:'center'">
                                The Content.
                            </div>
                        </div>
                    </div>*@

                <input id="spinner1" value="2">

                @*<div id="calendar" class="easyui-calendar" style="width:180px;height:180px;"></div>*@


                <input id="dd" type="text" class="easyui-datebox" required="required">

                <input id="datetime" type="text" class="easyui-datetimebox"  data-options="required:true,showSeconds:false"  name="birthday">


                @*<div id="dd" class="easyui-dialog" title="My Dialog" style="width:400px;height:200px;"
                             data-options="iconCls:'icon-save',resizable:true,modal:true,toolbar:[{
                        text:'Edit',
                        iconCls:'icon-edit',
                        handler:function(){alert('edit')}
                    },{
                        text:'Help',
                        iconCls:'icon-help',
                        handler:function(){alert('help')}
                    }]">
                            Dialog Content.
                        </div>*@

            </div>


            <div id="tt">
                <a href="#" class="icon-add" onclick="javascript:alert('add')"></a>
                <a href="#" class="icon-edit" onclick="javascript:alert('edit')"></a>
            </div>


            @*<div id="tabs" class="easyui-tabs" style="width:300px;height:150px;">
                    <div title="Tab1" style="padding:20px;display:none;">
                        tab1
                    </div>
                    <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">
                        tab2
                    </div>
                    <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">
                        tab3
                    </div>
                </div>*@



            @*<div id="accordion" class="easyui-accordion" style="width:300px;height:200px;">
                    <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
                        <h3 style="color:#0099FF;">Accordion for jQuery</h3>
                        <p>
                            Accordion is a part of easyui framework for jQuery.
                            It lets you define your accordion component on web page more easily.
                            It lets you define your accordion component on web page more easily.
                            It lets you define your accordion component on web page more easily.
                        </p>
                    </div>
                    <div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">
                        content2
                    </div>
                    <div title="Title3">
                        content3
                    </div>
                </div>*@


            <table class="easyui-datagrid" id="datagrid" style="width:400px;height:250px" data-options="fitColumns:true,singleSelect:true,toolbar: '#tb'">
                <thead>
                    <tr>
                        <th data-options="field:'code'">Code</th>
                        <th data-options="field:'name'">Name</th>
                        <th data-options="field:'price'">Price</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>001</td>
                        <td>name1</td>
                        <td>2323</td>
                    </tr>

                    <tr>
                        <td>002</td>
                        <td>name2</td>
                        <td>4612</td>
                    </tr>

                    <tr>
                        <td>003</td>
                        <td>name2</td>
                        <td>4612</td>
                    </tr>

                    <tr>
                        <td>004</td>
                        <td>name2</td>
                        <td>4612</td>
                    </tr>

                    <tr>
                        <td>005</td>
                        <td>name2</td>
                        <td>4612</td>
                    </tr>
                </tbody>
            </table>


            <ul class="easyui-datalist" title="DataList" id="datalist" style="width:400px;height:250px">
                <li value="AL">Alabama</li>
                <li value="AK">Alaska</li>
                <li value="AZ">Arizona</li>
                <li value="AR">Arkansas</li>
                <li value="CA">California</li>
                <li value="CO">Colorado</li>
            </ul> 

            @*<table class="easyui-datagrid" data-options="border:false,singleSelect:true,fit:true,fitColumns:true">
                    <thead>
                        <tr>
                            <th data-options="field:'itemid'" width="80">Item ID</th>
                            <th data-options="field:'productid'" width="100">Product ID</th>
                            <th data-options="field:'listprice',align:'right'" width="80">List Price</th>
                            <th data-options="field:'unitcost',align:'right'" width="80">Unit Cost</th>
                            <th data-options="field:'attr1'" width="150">Attribute</th>
                            <th data-options="field:'status',align:'center'" width="60">Status</th>
                        </tr>
                    </thead>
                </table>*@
        </div>
    </div>
</div>

<script type="text/javascript">

    $(document).on("click", ".menu-text", function () {
        console.log($('#ss').searchbox('getName', $(this).html()));
        $('#ss').searchbox('setValue', $(this).html());
        $.messager.alert('Title', 'load ok');
    });

    $('#calendar').calendar({
        onSelect: function (date) {
            alert(date.getFullYear() + ":" + (date.getMonth() + 1) + ":" + date.getDate());
        }
    });

    $('#datalist').datalist({ 
        //checkbox: true,
        lines: true
    });

    $('#tabs').tabs({
        border: false,
        onSelect: function (title) {
            console.log(title + ' is selected');
        }
    });

    $('#tabs').tabs('add', {
        title: 'New Tab',
        selected: false,
        content: 'Tab Body',
        closable: true,
        tools: [{
            handler: function () {
                alert('refresh');
            }
        }]
    }
    );

    $('#datagrid').datagrid({
        toolbar: [{
            iconCls: 'icon-edit',
            handler: function () { alert('edit') }
        }, '-', {
            iconCls: 'icon-help',
            handler: function () { alert('help') }
        }]
    });

    $('#datagrid').datagrid({
        rowStyler: function (index, row) {
            if (row.code > 2) {
                return 'background-color:#6293BB;color:#fff;'; // return inline style
                // the function can return predefined css class and inline style
                // return {class:'r1', style:{'color:#fff'}};
            }
        }
    });

    function qq(value, name) {
        alert(value + ":" + name);
    }

    $(document).on("click", "#ee", function () {
        //$('#dd').tooltip("update", "123");  //更改tip的值

        //$("#p").panel("setTitle", "123");   //更改面板的title

        //var pp = $('#tabs').tabs('getSelected');    //获取选中的标签页

        //$('#tabs').tabs('close', 2);    //关闭一个标签页面板

        //$('#tabs').tabs('select', 1);    //选择一个标签页面板

        //var pp = $('#accordion').accordion('getSelected'); // 获取选中的面板（panel）
        //if (pp) {
        //    pp.panel('refresh', 'LayUIDemo'); // 调用 'refresh' 方法加载新内容
        //}

        //$('#accordion').accordion('add', {     //Accordion新增一个panel
        //    title: 'New Title',
        //    content: 'New Content',
        //    selected: false
        //});

        //$('#accordion').accordion('remove',2);     //Accordion删除一个panel

        //$('#accordion').accordion('getPanel', 2);    //Accordion选择一个panel

        //$('#accordion').accordion('getSelected');     //Accordion获取第一个选中的面板


        //$('#layouts').layout('add', {    //layout添加一个region
        //    region: 'west',
        //    width: 200,
        //    title: 'West Title',
        //    split: true,
        //    tools: [{
        //        iconCls: 'icon-add',
        //        handler: function () { alert('add') }
        //    }, {
        //        iconCls: 'icon-remove',
        //        handler: function () { alert('remove') }
        //    }]
        //});

        //$('#layouts').layout('remove', "west");  //layout删除一个region

        //console.log($('#combobox').combobox('getValue'));       //combox获取选择项

        //$('#textbox1').textbox('setText', '1231212');
        //$('#textbox1').textbox('setValue', '1231212');



        //$('#windows').window('open'); // open a window
        //$('#windows').window('refresh', 'LayUIDemo');

        //$.messager.show({
        //    title: 'My Title',
        //    msg: 'Message will be closed after 5 seconds.',
        //    timeout: 5000,
        //    showType: 'slide'
        //});

        //$.messager.confirm({
        //    title: 'My Title',
        //    msg: 'Are you confirm this?',
        //    fn: function (r) {
        //        if (r) {
        //            alert('confirmed: ' + r);
        //        }
        //    }
        //});

        //$.messager.prompt({
        //    title: 'Prompt',
        //    msg: 'Please enter your name:',
        //    fn: function (r) {
        //        if (r) {
        //            alert('Your name is:' + r);
        //        }
        //    }
        //});

        //$.messager.progress();
    });

    $("#combobox").combobox({                                       //combox获取选择项
        onSelect: function (record) {
            console.log($('#combobox').combobox('getValue'));
        }
    });

    $(function () {

        $('#dd').tooltip({
            position: 'right',
            content: '<span style="color:#fff">This is the tooltip message.</span>',
            onShow: function () {
                $(this).tooltip('tip').css({
                    backgroundColor: '#666',
                    borderColor: '#666'
                });
            }
        });

        $('#spinner1').spinner({
            required: true,
            increment: 10
        });
    });
</script>